<template>
	<view>
		<view class="content-box">
			<view class="content-box-info">
				<image src="../../../static/images/noneImg.png" mode="" class="info-img"></image>
				<view class="info-left">
					<view class="info-left-title">
						{{data.name}}
					</view>
					<view class="info-left-detail">
						<text>{{data.sex==0? '男':'女'}}</text><text>{{data.careerName}}</text><text>{{data.phone}}</text>
					</view>
				</view>
			</view>
			<view class="content-box-center">
				<text>申请加入 <text>{{data.associationName}}</text></text> <text>{{data.createTime | formatTime}}</text>
			</view>
			<view class="content-box-explain">
				{{data.applicationReason}}
			</view>
		</view>
		<view class="content-button">
			<button class="addClub-refuse" @click="addClub(false)">拒绝</button>
			<button class="addClub-agree" @click="addClub(true)">同意</button>
		</view>
	</view>
</template>

<script>
	import {
		joinClub2
	} from '@/api/myMessage/myMessage.js'
	export default {
		data() {
			return {
				data: ''
			};
		},
		onLoad(option) {
			this.data = JSON.parse(option.data)
		},
		methods: {
			// 是否同意入团申请
			addClub(bool) {
				//同意
				const data = {
					id: this.data.id
				}
				if (bool) {
					this.$modal.confirm('确认同意入团申请', '同意入团').then(res => {
						if (res == true) {
							data.auditResults = 1
							joinClub2(data).then(res => {
								if (res.code == 200) {
									this.$modal.msg('同意入团申请成功')
									setTimeout(() => {
										this.$tab.navigateBack()
									}, 1000)
								}
							})
						}
					})

				} else {
					this.$modal.confirm('确认拒绝入团申请', '拒绝入团').then(res => {
						if (res == true) {
							data.auditResults = -1
							joinClub2(data).then(res => {
								if (res.code == 200) {
									this.$modal.msg('拒绝入团申请成功')
									setTimeout(() => {
										this.$tab.navigateBack()
									}, 1000)
								}
							})
						}
					})
				}
			}
		},
		filters: {
			formatTime(time) {
				let date = new Date(time)
				let month = date.getMonth() + 1
				let day = date.getDate()
				let hours = date.getHours()
				let minutes = date.getMinutes()
				return `${month}月${day}日 ${hours}:${minutes}`
			}
		}
	}
</script>

<style lang="scss">
	.content-box {
		margin: 34rpx auto;
		width: 716rpx;
		height: 474rpx;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(16, 16, 16, 1);
		font-size: 28rpx;
		font-family: Arial;
		padding: 22rpx 26rpx;
		border: 2rpx solid rgba(187, 187, 187, 1);

		.content-box-info {
			height: 170rpx;
			display: flex;

			.info-img {
				width: 170rpx;
				height: 170rpx;
				margin-right: 50rpx;
				border-radius: 86rpx;
			}

			.info-left {

				.info-left-title {
					margin-top: 40rpx;
					height: 40rpx;
					color: rgba(16, 16, 16, 1);
					font-size: 28rpx;
					font-family: PingFangSC-regular;
				}

				.info-left-detail {
					margin-top: 50rpx;
					color: rgba(160, 160, 160, 1);
					font-size: 28rpx;

					& text:nth-child(2) {
						margin: 0 30rpx 0 40rpx;
					}

				}
			}
		}

		.content-box-center {
			margin: 50rpx 0;
			padding: 0 40rpx 0 30rpx;
			color: rgba(16, 16, 16, 1);
			font-size: 28rpx;
			display: flex;
			justify-content: space-between;

			&>text:nth-child(1) text {
				color: #7FB8EE;
				margin-left: 20rpx;
			}

			&>text:nth-child(2) {
				color: rgba(160, 160, 160, 1);
				font-size: 28rpx;
			}
		}

		.content-box-explain {
			padding: 0 40rpx 0 30rpx;
			color: rgba(160, 160, 160, 1);
			font-size: 28rpx;
		}

	}

	.content-button {
		display: flex;
		justify-content: space-around;
		margin-top: 56rpx;
		padding: 0 40rpx;

		.addClub-refuse,
		.addClub-agree {
			width: 264rpx;
			height: 96rpx;
			line-height: 96rpx;
			border-radius: 8rpx;
			background-color: rgba(189, 49, 36, 0.84);
			color: rgba(255, 255, 255, 1);
			font-size: 32rpx;
			text-align: center;
		}

		.addClub-agree {
			background-color: rgba(17, 209, 131, 1);
		}

	}
</style>
